/**
 * 简历模板库页面脚本
 */

document.addEventListener('DOMContentLoaded', function() {
    // 初始化筛选功能
    initFilters();
    
    // 初始化排序功能
    initSorting();
    
    // 初始化模板卡片交互
    initTemplateCards();
    
    // 初始化分页功能
    initPagination();
    
    // 初始化第一页内容
    loadPageContent(1);
    
    // 设置第一页为激活状态
    const firstPageBtn = document.querySelector('.pagination-number');
    if (firstPageBtn) {
        firstPageBtn.classList.add('active');
    }
    
    // 初始化模态框
    initModals();
    
    // 初始化CTA按钮
    initCTAButton();
    
    // 调试图片加载问题
    debugImageLoading();
});

/**
 * 调试图片加载问题
 */
function debugImageLoading() {
    const templateImages = document.querySelectorAll('.template-image');
    console.log('找到模板图片数量:', templateImages.length);
    
    templateImages.forEach((img, index) => {
        console.log(`图片 ${index + 1}:`, img.src);
        
        img.addEventListener('load', function() {
            console.log(`图片加载成功: ${this.src}`);
        });
        
        img.addEventListener('error', function() {
            console.error(`图片加载失败: ${this.src}`);
            // 尝试重新加载
            setTimeout(() => {
                this.src = this.src + '?t=' + Date.now();
            }, 1000);
        });
        
        // 检查图片的自然尺寸
        if (img.complete) {
            if (img.naturalWidth === 0) {
                console.error(`图片无效或损坏: ${img.src}`);
            } else {
                console.log(`图片已加载: ${img.src}, 尺寸: ${img.naturalWidth}x${img.naturalHeight}`);
            }
        }
    });
}

/**
 * 初始化筛选功能
 */
function initFilters() {
    // 获取所有筛选按钮
    const filterOptions = document.querySelectorAll('.filter-option');
    
    // 为每个筛选按钮添加点击事件
    filterOptions.forEach(option => {
        option.addEventListener('click', function() {
            // 移除同组中其他按钮的active类
            const parentGroup = this.closest('.filter-group');
            parentGroup.querySelectorAll('.filter-option').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // 为当前按钮添加active类
            this.classList.add('active');
            
            // 应用筛选
            applyFilters();
        });
    });
    
    // 初始化标签筛选（如果存在）
    const tagButtons = document.querySelectorAll('.tag-btn');
    if (tagButtons.length > 0) {
        tagButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                this.classList.toggle('active');
                filterTemplates();
            });
        });
    }
    
    // 初始化清除筛选按钮（如果存在）
    const clearFiltersBtn = document.querySelector('.clear-filters-btn');
    if (clearFiltersBtn) {
        clearFiltersBtn.addEventListener('click', function() {
            // 重置所有筛选选项
            document.querySelectorAll('.filter-option').forEach(opt => {
                if (opt.dataset.value === 'all') {
                    opt.classList.add('active');
                } else {
                    opt.classList.remove('active');
                }
            });
            
            // 重置标签筛选
            document.querySelectorAll('.tag-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // 重置排序
            const sortSelect = document.getElementById('sortSelect');
            if (sortSelect) sortSelect.value = 'popular';
            
            // 重新筛选
            filterTemplates();
        });
    }
}

/**
 * 应用筛选和排序
 */
function applyFilters() {
    // 获取所有模板卡片
    const templateCards = document.querySelectorAll('.template-card');
    
    // 获取当前选中的行业筛选
    const industryFilter = document.querySelector('.filter-group:nth-child(1) .filter-option.active').getAttribute('data-filter');
    
    // 获取当前选中的风格筛选
    const styleFilter = document.querySelector('.filter-group:nth-child(2) .filter-option.active').getAttribute('data-filter');
    
    // 遍历所有模板卡片，应用筛选
    templateCards.forEach(card => {
        const categories = card.getAttribute('data-category').split(' ');
        
        // 检查卡片是否符合筛选条件
        const matchesIndustry = industryFilter === 'all' || categories.includes(industryFilter);
        const matchesStyle = styleFilter === 'all' || categories.includes(styleFilter);
        
        // 显示或隐藏卡片
        if (matchesIndustry && matchesStyle) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
    
    // 更新显示的模板数量
    updateVisibleCount();
}

/**
 * 更新显示的模板数量
 */
function updateVisibleCount() {
    const visibleCards = document.querySelectorAll('.template-card[style="display: block"]').length;
    // 如果页面上有显示计数的元素，可以在这里更新
    // 例如：document.querySelector('.results-count').textContent = `显示 ${visibleCards} 个模板`;
}

/**
 * 初始化排序功能
 */
function initSorting() {
    const sortSelect = document.querySelector('.sort-select');
    
    sortSelect.addEventListener('change', function() {
        const sortValue = this.value;
        const templateContainer = document.querySelector('.templates-container');
        const templateCards = Array.from(document.querySelectorAll('.template-card'));
        
        // 根据选择的排序方式对模板卡片进行排序
        templateCards.sort((a, b) => {
            if (sortValue === 'popular') {
                // 按照评分排序（从高到低）
                const ratingA = parseFloat(a.querySelector('.template-rating').textContent.trim());
                const ratingB = parseFloat(b.querySelector('.template-rating').textContent.trim());
                return ratingB - ratingA;
            } else if (sortValue === 'newest') {
                // 这里假设有data-date属性，实际中可能需要调整
                return 0; // 占位，实际项目中需要实现
            } else if (sortValue === 'name-asc') {
                // 按名称字母顺序（A-Z）
                const nameA = a.querySelector('h3').textContent.trim();
                const nameB = b.querySelector('h3').textContent.trim();
                return nameA.localeCompare(nameB, 'zh-CN');
            } else if (sortValue === 'name-desc') {
                // 按名称字母顺序（Z-A）
                const nameA = a.querySelector('h3').textContent.trim();
                const nameB = b.querySelector('h3').textContent.trim();
                return nameB.localeCompare(nameA, 'zh-CN');
            }
            return 0;
        });
        
        // 重新添加排序后的卡片到容器
        templateCards.forEach(card => {
            templateContainer.appendChild(card);
        });
    });
}

/**
 * 初始化模板卡片交互
 */
function initTemplateCards() {
    // 为所有模板卡片添加点击事件
    const templateCards = document.querySelectorAll('.template-card');
    
    templateCards.forEach(card => {
        // 预览按钮点击事件
        const previewBtn = card.querySelector('.template-preview-btn');
        if (previewBtn) {
            previewBtn.addEventListener('click', function(e) {
                e.preventDefault();
                // 获取模板信息
                const templateId = this.getAttribute('data-template-id');
                const templateName = card.querySelector('h3').textContent;
                const templateImage = card.querySelector('img').src;
                const templateType = card.querySelector('.template-type.premium') !== null ? '高级模板' : '免费模板';
                const templateIndustry = card.getAttribute('data-category') || '通用';
                const templateDownloads = card.querySelector('.download-count')?.textContent || '1,234';
                
                // 打开预览模态框
                openTemplatePreview(templateId, templateName, templateImage, templateType, templateIndustry, templateDownloads);
            });
        }
        
        // 使用模板按钮点击事件
        const useBtn = card.querySelector('.btn-primary');
        if (useBtn) {
            useBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const templateId = this.getAttribute('href').split('=')[1];
                console.log(`使用模板ID: ${templateId}`);
                // 检查是否为高级模板
                const isPremium = card.querySelector('.template-type.premium') !== null;
                
                if (isPremium) {
                    // 检查用户是否为会员，如果不是，显示升级提示
                    // 这里假设有一个函数来检查用户会员状态
                    if (!checkUserMembership()) {
                        showUpgradeModal();
                        return;
                    }
                }
                
                // 跳转到编辑器页面
                window.location.href = `resume-editor.html?template=${templateId}`;
            });
        }
    });
}

/**
 * 初始化模态框
 */
function initModals() {
    // 模板预览模态框
    const templateModal = document.getElementById('templateModal');
    const modalOverlay = document.getElementById('modalOverlay');
    const modalClose = document.getElementById('modalClose');
    const modalClose2 = document.getElementById('modalClose2');
    const modalUseTemplate = document.getElementById('modalUseTemplate');
    
    // 关闭模态框事件
    if (modalClose) {
        modalClose.addEventListener('click', closeTemplateModal);
    }
    
    if (modalClose2) {
        modalClose2.addEventListener('click', closeTemplateModal);
    }
    
    // 点击模态框背景关闭
    if (modalOverlay) {
        modalOverlay.addEventListener('click', closeTemplateModal);
    }
    
    // 使用模板按钮
    if (modalUseTemplate) {
        modalUseTemplate.addEventListener('click', function() {
            const templateId = this.dataset.templateId;
            const isPremium = this.dataset.premium === 'true';
            
            if (isPremium && !checkUserMembership()) {
                closeTemplateModal();
                showUpgradePrompt();
            } else {
                // 使用模板逻辑
                window.location.href = `editor.html?template=${templateId}`;
            }
        });
    }
    
    // 会员升级模态框
    const upgradeModal = document.getElementById('upgradeModal');
    const upgradeOverlay = document.getElementById('upgradeOverlay');
    const upgradeClose = document.getElementById('upgradeClose');
    
    // 关闭升级模态框事件
    if (upgradeClose) {
        upgradeClose.addEventListener('click', closeUpgradeModal);
    }
    
    // 点击升级模态框背景关闭
    if (upgradeOverlay) {
        upgradeOverlay.addEventListener('click', closeUpgradeModal);
    }
    
    // 会员购买按钮
    const purchaseBtns = document.querySelectorAll('.membership-option .btn');
    if (purchaseBtns.length > 0) {
        purchaseBtns.forEach(btn => {
            btn.addEventListener('click', purchaseMembership);
        });
    }
}

/**
 * 初始化CTA按钮
 */
function initCTAButton() {
    const ctaUpgradeBtn = document.getElementById('ctaUpgradeBtn');
    
    if (ctaUpgradeBtn) {
        ctaUpgradeBtn.addEventListener('click', showUpgradePrompt);
    }
}

/**
 * 打开模板预览模态框
 * @param {string} templateId - 模板ID
 * @param {string} templateName - 模板名称
 * @param {string} templateImage - 模板图片URL
 * @param {string} templateType - 模板类型
 * @param {string} templateIndustry - 适用行业
 * @param {string} templateDownloads - 下载量
 */
function openTemplatePreview(templateId, templateName, templateImage, templateType, templateIndustry, templateDownloads) {
    const templateModal = document.getElementById('templateModal');
    if (!templateModal) {
        console.error('模板预览加载失败，请刷新页面重试');
        return;
    }
    
    const modalTitle = templateModal.querySelector('.modal-title');
    const modalPreviewImage = document.getElementById('modalPreviewImage');
    const modalDescription = document.getElementById('modalDescription');
    const modalType = document.getElementById('modalType');
    const modalIndustry = document.getElementById('modalIndustry');
    const modalDownloads = document.getElementById('modalDownloads');
    const modalRating = document.getElementById('modalRating');
    const modalUseTemplate = document.getElementById('modalUseTemplate');
    
    // 设置模态框内容
    if (modalTitle) modalTitle.textContent = templateName || '专业简历模板';
    
    // 设置预览图片 - 使用相同的图片路径
    if (modalPreviewImage) {
        modalPreviewImage.src = templateImage || 'images/templates/template-preview-large.jpg';
        modalPreviewImage.alt = templateName + ' 预览';
    }
    
    if (modalDescription) modalDescription.textContent = '这是一个专业的简历模板，适合各种行业的求职者使用。清晰的布局和现代的设计使您的简历脱颖而出。';
    if (modalType) modalType.textContent = templateType || '专业型';
    if (modalIndustry) modalIndustry.textContent = templateIndustry || '通用';
    if (modalDownloads) modalDownloads.textContent = templateDownloads || '1,234';
    if (modalRating) modalRating.textContent = '4.8';
    
    // 设置使用按钮的数据
    if (modalUseTemplate) {
        modalUseTemplate.dataset.templateId = templateId;
        modalUseTemplate.dataset.premium = templateType === '高级模板' ? 'true' : 'false';
    }
    
    // 显示模态框
    templateModal.classList.add('active');
    document.body.style.overflow = 'hidden'; // 防止背景滚动
}

/**
 * 关闭模板预览模态框
 */
function closeTemplateModal() {
    const modal = document.getElementById('templateModal');
    if (modal) {
        modal.classList.remove('active');
        document.body.style.overflow = ''; // 恢复背景滚动
    }
}

/**
 * 使用模板
 * @param {string} templateId - 模板ID
 */
function useTemplate(templateId) {
    console.log(`使用模板: ${templateId}`);
    // 这里应该是实际的使用模板逻辑，例如跳转到编辑页面
    window.location.href = `editor.html?template=${templateId}`;
}

/**
 * 检查用户是否为会员
 * @returns {boolean} - 是否为会员
 */
function checkUserMembership() {
    // 这里应该是实际的会员检查逻辑
    // 模拟非会员状态
    return false;
}

/**
 * 显示升级会员提示
 */
function showUpgradePrompt() {
    const upgradeModal = document.getElementById('upgradeModal');
    if (upgradeModal) {
        upgradeModal.classList.add('active');
        document.body.style.overflow = 'hidden'; // 防止背景滚动
    }
}

/**
 * 关闭升级会员提示模态框
 */
function closeUpgradeModal() {
    const upgradeModal = document.getElementById('upgradeModal');
    if (upgradeModal) {
        upgradeModal.classList.remove('active');
        document.body.style.overflow = ''; // 恢复背景滚动
    }
}

/**
 * 购买会员
 */
function purchaseMembership() {
    // 获取选择的会员类型
    const option = this.closest('.membership-option');
    const isAnnual = option && option.querySelector('h4').textContent.includes('年度');
    const type = isAnnual ? '年度' : '月度';
    
    // 这里应该是实际的会员购买逻辑
    console.log(`购买${type}会员`);
    
    // 模拟购买成功
    setTimeout(() => {
        closeUpgradeModal();
        showToast(`${type}会员购买成功！您现在可以使用所有高级模板了。`, 'success');
    }, 1000);
}

/**
 * 显示Toast提示
 * @param {string} message - 提示信息
 * @param {string} type - 提示类型（success, error, warning, info）
 */
function showToast(message, type = 'info') {
    // 创建toast元素
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.textContent = message;
    
    // 添加到页面
    document.body.appendChild(toast);
    
    // 显示动画
    setTimeout(() => {
        toast.classList.add('show');
    }, 10);
    
    // 自动关闭
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, 3000);
}

/**
 * 显示加载状态
 */
function showLoading() {
    // 检查是否已存在loading元素
    if (document.querySelector('.loading-overlay')) return;
    
    // 创建loading元素
    const loading = document.createElement('div');
    loading.className = 'loading-overlay';
    loading.innerHTML = '<div class="loading-spinner"></div>';
    
    // 添加到页面
    document.body.appendChild(loading);
}

/**
 * 隐藏加载状态
 */
function hideLoading() {
    const loading = document.querySelector('.loading-overlay');
    if (loading) {
        loading.classList.add('fade-out');
        setTimeout(() => {
            document.body.removeChild(loading);
        }, 300);
    }
}

/**
 * 初始化分页功能
 */
function initPagination() {
    // 计算总页数
    const totalTemplates = document.querySelectorAll('.template-card').length;
    const templatesPerPage = 9;
    const totalPages = Math.ceil(totalTemplates / templatesPerPage);
    
    // 动态生成分页按钮
    const paginationContainer = document.querySelector('.pagination');
    const prevBtn = paginationContainer.querySelector('.pagination-btn.prev');
    const nextBtn = paginationContainer.querySelector('.pagination-btn.next');
    
    // 清除现有的数字按钮
    const existingNumbers = paginationContainer.querySelectorAll('.pagination-number');
    existingNumbers.forEach(btn => btn.remove());
    
    // 生成新的数字按钮
    for (let i = 1; i <= totalPages; i++) {
        const pageBtn = document.createElement('a');
        pageBtn.href = '#';
        pageBtn.className = 'pagination-btn pagination-number';
        pageBtn.textContent = i;
        if (i === 1) pageBtn.classList.add('active');
        
        // 插入到下一页按钮之前
        paginationContainer.insertBefore(pageBtn, nextBtn);
    }
    
    // 获取所有分页按钮（包括新生成的）
    const paginationNumbers = document.querySelectorAll('.pagination-number');
    
    // 为数字按钮添加点击事件
    paginationNumbers.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除其他按钮的active类
            paginationNumbers.forEach(b => b.classList.remove('active'));
            // 为当前按钮添加active类
            this.classList.add('active');
            
            const pageNum = parseInt(this.textContent);
            console.log(`加载第 ${pageNum} 页`);
            
            // 模拟加载对应页面的内容
            loadPageContent(pageNum);
            
            // 滚动到模板区域
            const templatesGrid = document.querySelector('.templates-grid');
            if (templatesGrid) {
                templatesGrid.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // 上一页按钮
    if (prevBtn) {
        prevBtn.addEventListener('click', function(e) {
            e.preventDefault();
            
            const currentPage = document.querySelector('.pagination-number.active');
            if (currentPage) {
                const currentPageNum = parseInt(currentPage.textContent);
                if (currentPageNum > 1) {
                    // 找到上一页按钮
                    const prevPageBtn = Array.from(paginationNumbers).find(btn => 
                        parseInt(btn.textContent) === currentPageNum - 1
                    );
                    if (prevPageBtn) {
                        prevPageBtn.click();
                    }
                }
            }
        });
    }
    
    // 下一页按钮
    if (nextBtn) {
        nextBtn.addEventListener('click', function(e) {
            e.preventDefault();
            
            const currentPage = document.querySelector('.pagination-number.active');
            if (currentPage) {
                const currentPageNum = parseInt(currentPage.textContent);
                
                if (currentPageNum < totalPages) {
                    // 找到下一页按钮
                    const nextPageBtn = Array.from(paginationNumbers).find(btn => 
                        parseInt(btn.textContent) === currentPageNum + 1
                    );
                    if (nextPageBtn) {
                        nextPageBtn.click();
                    }
                }
            }
        });
    }
}

/**
 * 加载指定页面的内容
 * @param {number} pageNum - 页码
 */
function loadPageContent(pageNum) {
    // 显示加载状态
    showLoading();
    
    // 模拟异步加载
    setTimeout(() => {
        // 获取模板容器
        const templatesContainer = document.querySelector('.templates-container');
        if (!templatesContainer) {
            hideLoading();
            return;
        }
        
        // 获取所有模板卡片
        const allTemplates = Array.from(templatesContainer.children);
        const templatesPerPage = 9; // 每页显示9个模板
        const startIndex = (pageNum - 1) * templatesPerPage;
        const endIndex = startIndex + templatesPerPage;
        
        // 隐藏所有模板
        allTemplates.forEach(template => {
            template.style.display = 'none';
        });
        
        // 显示当前页的模板
        for (let i = startIndex; i < endIndex && i < allTemplates.length; i++) {
            if (allTemplates[i]) {
                allTemplates[i].style.display = 'block';
            }
        }
        
        // 隐藏加载状态
        hideLoading();
        
        // 显示成功提示
        showToast(`已切换到第 ${pageNum} 页`, 'success');
        
        console.log(`已加载第 ${pageNum} 页的模板内容`);
    }, 500);
}